<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="../common/top.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .delete:hover
        {
            cursor: grab;
        }
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 0;
            margin: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .bigbox {
            float: left;
            width: 400px;
            height: 400px;
            position: relative;
            margin: 200px 50px;

        }

        .bigbox .box {
            width: 400px;
            height: 400px;
            border: #DEB887 2px solid;
            overflow: hidden;
            position: relative;
            border-radius: 50%;
        }

        #header_link {
            float: right;
            margin: 18px 0 0 0;
            width: 500px;
        }

        .information {
            float: left;
            position: relative;
            width: 650px;
            height: 600px;
            margin: 150px 50px;
            overflow: hidden;
            /* background-color: skyblue; */
        }

        .summary-price-wrap .s-p-w-wrap {
            padding: 22px 0 12px;

            float: left;
        }

        .summary-item {
            position: relative;
            float: left;
            width: 100%;
            margin-bottom: 5px;
        }

        .summary-item .si-tit {
            float: left;
            padding-left: 20px;
            width: 60px;
            margin-right: 0px;
            line-height: 24px;
            color: #8c8c8c;
        }

        .summary-item .si-warp {
            float: left;
            line-height: 24px;
            width: 520px;
        }

        .summary-price-wrap .si-info {
            position: absolute;
            top: 150px;
            left: 450px;
        }

        .summary-price-wrap .si-cumulative {
            float: left;
            padding-right: 10px;
            margin-right: 10px;
            font-size: 12px;
            line-height: 14px;
            border-right: 1px solid #f0f0f0;
        }

        .summary-price-wrap .si-cumulative em {
            font-size: 14px;
            color: #b31919;
            margin-left: 8px;
        }

        .summary-item .si-warp .shop-price {
            font-size: 30px;
            height: 24px;
            line-height: 24px;
            float: left;
            margin-left: 2px;
            color: #EE356C;
        }

        .summary-item .si-warp .m-price {
            line-height: 24px;
            text-decoration: line-through;
            margin-left: 8px;
        }

        .btnp {
            vertical-align: middle;
            display: inline-block;
            border-radius: 4px;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 5px;
            padding: 15px;
            width: 150px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 15px;
        }

        .btnp span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;

        }

        .btnp span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

        .btnp:hover {
            transform: translate(0, -5px);
            box-shadow: 0px 3px 10px #888888;
        }

        .btnp:hover span {
            padding-right: 15px;
        }

        .btnp:hover span:after {
            opacity: 1;
            right: 0;
        }

        .information .btnclass {
            display: flex;
            justify-content: center;
            padding: 60px;
        }

        /* 鼠标悬浮使组件变化 */
        .bigbox .box:hover {
            cursor: pointer;
            transform: translate(0, -5px);
            transition: 0.5s;
            box-shadow: 0px 3px 10px #888888;
            border: #87c5de 2px solid;
        }

        .bigbox .box div {
            width: 100%;
            height: 100%;
        }

        .bigbox .box div img {
            width: 100%;
            height: 100%;
        }

        .bigbox .btn {
            position: relative;
            height: 20px;
            bottom: 50px;
            left: 115px;
        }

        .bigbox .btn ul {
            height: 20px;
        }

        .bigbox .btn ul li {
            float: left;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            background-color: #dfe1e254;
            border-radius: 50%;
            margin: 0 2px;
        }

        .bigbox .box div:nth-child(1) {
            background-color: gold;
        }

        .bigbox .box div:nth-child(2) {
            background-color: red;
        }

        .bigbox .box div:nth-child(3) {
            background-color: gainsboro;
        }

        .bigbox .box div:nth-child(4) {
            background-color: khaki;
        }

        .bigbox .box div:nth-child(5) {
            background-color: skyblue;
        }

        .WriteComment
        {
            margin-top: 100px;
            margin-left: 42%;
            height: 30px;
            width: 100px;
        }

        .showComment
        {
            margin-top: 30px;
            margin-bottom: 5px;
            margin-left: 42%;
        }
        .show
        {
            margin-top: 10px;
            width: 250px;
        }
        #btn1
        {
            margin-top: 10px;
            margin-left: 220px;

        }

        #input
        {
            width: 250px;
            height: 50px;
        }
        .fengexian
        {

            margin-left: 0;
        }
        .time
        {
            margin-top: 10px;
        }

    </style>
</head>

<body>
<div class="header">
    <h1 id="myh1">欢迎光临宠物商店!</h1>
</div>

<div class="topnav">
    <!--跳转到目录下的网页。网页大体是一样的，只是展示的商品不一样-->
    <a href="welcome" target="_self">首页</a>
    <a href="category?categoryId=cat" id="cat" target="_self">猫猫</a>
    <a href="category?categoryId=dog" id="dog" target="_self">狗狗</a>
    <a href="category?categoryId=bird" id=bird target="_self">鸟类</a>
    <a href="category?categoryId=pokemon" id="pokemon" target="_self">宝可梦</a>
    <a href="category?categoryId=bugCat" id="bugCat" target="_self">猫猫虫</a>
    <!--搜索框-->
    <form action="Search" method="post">
        <div class="searchDiv">
            <input type="text" name="searchName" placeholder="请输入想搜索的商品"
                   style="float: left;outline: none;border-style:none; height: 43px;padding: 1px 2px;">
            <input type="submit" name="submitSearch" class="searchBtn" id="#" value="搜索">
        </div>
    </form>
    <!--搜索框-->
    <c:if test="${sessionScope.username != null}">
        <a href="space" style="float: right;" target="_self">个人中心</a>
    </c:if>
    <c:if test="${sessionScope.username == null}">
        <a href="login" style="float: right;" target="_self">欢迎登录</a>
    </c:if>
    <a href="cart" style="float: right;" target="_self">购物车</a>
</div>

<div class="mainColumn">
    <div class="bigest">


        <div class="bigbox">
            <div class="box">
                <div id="news1"><img src="${sessionScope.item.description}" alt=""></div>
            </div>

        </div>
        <div class="information">
            <form action="" method="" name="">
                <div class="purchase">
                    <div style="text-align:center;font-size: 40px;font-weight: bold;">${sessionScope.item.name}</div>
                    <p style="font-weight: bold;color:red;font-size:20px;text-align: center;">双十一超级优惠，钱包大出血。</p>
                </div>
                <div class="summary-price-wrap">
                    <div class="s-p-w-wrap">
                        <div class="summary-item si-shop-price">
                            <div class="si-tit">促 销 价</div>
                            <div class="si-warp">
                                <strong class="shop-price" id="ECS_SHOPPRICE"
                                        ectype="SHOP_PRICE">${sessionScope.item.listPrice}</strong>

                            </div>
                        </div>
                        <div class="summary-item si-market-price">
                            <div class="si-tit">市 场 价</div>
                            <div class="si-warp">
                                <div class="m-price" id="ECS_MARKETPRICE">${sessionScope.item.unitPrice}</div>
                            </div>
                        </div>
                        <div class="si-info">
                            <div class="si-cumulative">累计评价
                                <em>0</em>
                            </div>
                            <div class="si-cumulative">累计销量
                                <em>1</em>
                            </div>
                        </div>

                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear">
                    <br><br>
                </div>
                <div class="summary-item is-service">
                    <div class="si-tit">服务</div>
                    <div class="si-warp">
                        <div class="fl" style="float:left;">
                            <a href="/shop/46.html" style="color: red;" target="_blank">奸商潮宠专卖</a>发货并提供售后服务。
                        </div>
                        <div class="fl pl10" id="user_area_shipping" style="float:left;">
                            <span class="gary" style="color: #8c8c8c;;" ectype="freight_info_span">[ 快递：包邮 ]</span>
                        </div>
                    </div>
                </div>
                <div class="clear">
                    <br> <br>
                </div>
                <div class="summary-item is-number">
                    <div class="si-tit">数量</div>
                    <div class="">

                    </div>
                    <div class="si-warp">
                        <span>库存&nbsp;
                            <em id="goods_attr_num" ectype="goods_attr_num">998</em>&nbsp;个</span>
                    </div>
                </div>
                <div class=“btnclass”>

                    <%--此处修改--%>
                    <a href="order?from=item&itemId=${sessionScope.item.itemId}" style="background-color: #f4511e;"
                       class="btnp"><span>立即购买</span> </a>

                    <a href="addItemToCart?itemId=${sessionScope.item.itemId}" style="background-color: #1ef44c;"
                       class="btnp"><span>放入购物车</span> </a>
                </div>
            </form>


        </div>


    </div>

</div>
<br><br><br><br>
<h2 align="center">评论区</h2>
<h5 align="center">--------------------------------------------------------------------------------------------------------------------------------------------------------------</h5>
<!--写回复区-->
<table class="WriteComment">
    <tr>
        <td>
            <form style="width: 200px;" action="Item" method="post" accept-charset="UTF-8">
                <c:if test="${sessionScope.username != null}">
                    <label>
                        <input style="font-family: 等线,serif" type="text" id="input" name="COM">
                        <input style="font-family: 等线,serif" type="button" value="发送" id = "btn1">
                    </label>

                </c:if>
                <c:if test="${sessionScope.username == null}">
                    <a href="<c:url value="/login"/>" style="color: #05a7ff"><u>点击登录即可发表评论</u></a>
                </c:if>
            </form>

        </td>
    </tr>
</table>
<!--提交按钮-->

<c:forEach var="comment" items="${sessionScope.commentList}">
    <!--评论表格-->
    <div id="wrap${comment.comment}${sessionScope.username}" class = "showComment">
        <div style="font-family: Bahnschrift,serif;font-size: 15px;opacity: 0.6;">${comment.username}</div>
        <div style="font-family: 黑体,serif;overflow: hidden;word-break: break-word;word-wrap: break-word; color: black; vertical-align: baseline; font-size: 20px;" class="show">${comment.comment} <c:if test="${comment.username == sessionScope.username}"><img
                id="delete${comment.comment}.itemName${sessionScope.item.name}.username${sessionScope.username}"
                class="delete" style="width: 15px;height: 15px;" src="<c:url value="/image/delete.png"/>"></c:if>
        </div>
        <div style="font-family: 微软雅黑,serif; font-size: 10px;font-weight: lighter;opacity: 0.5;" class="time">${comment.published_time}</div>
    </div>
    <hr class="fengexian" >
</c:forEach>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/comment.js"></script>

</body>
<%@include file="../common/bottom.jsp" %>
</html>